<template>
	<!-- 医护接单-内容item -->
	<view class="contentList">
		<view class="item" v-for="(item,index) in 10" :key="index">
			<view class="one">
				<text class="oneP">推拿按摩</text>
				<view class="price">
					<text>￥</text>
					<text>288</text>
				</view>
			</view>
			<view class="two">
				<text>三甲<text class="type">主任</text></text>
				<text class="time">预约时间：2025-8-22 10:25:36</text>
			</view>
			<view class="three">
				<view class="iconfont icon-xiaolian">
				</view>
				<text>东莞市南城街道天安数码城A1栋414</text>
			</view>
			<view class="four">
				<text>备注信息备注信息备注信息，备注信息备注信息备注信息，备注信息备注信息备注信息备注信息</text>
			</view>
			<view class="btn" @tap="accpetOrder">
				<text>接单</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "acceptItem",
		data() {
			return {

			};
		},
		methods: {
			accpetOrder() {
				console.log('点击事件');
				this.$emit('accpetOrder')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contentList {
		position: relative;

		.item {
			position: relative;
			padding: 18rpx;
			margin-bottom: 24rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 24rpx;
			font-size: 24rpx;

			.one {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 8rpx;

				.oneP {
					font-size: 28rpx;
					font-weight: bold;
				}

				.price {
					display: flex;
					align-items: center;

					text:nth-child(1) {
						font-size: 20rpx;
						font-weight: 600;
						letter-spacing: 0rpx;
						line-height: 42.44rpx;
						color: rgba(255, 140, 64, 1);
					}

					text:nth-child(2) {
						font-size: 32rpx;
						font-weight: 600;
						letter-spacing: 0rpx;
						line-height: 42.44rpx;
						color: rgba(255, 140, 64, 1);
					}
				}
			}

			.two {
				display: flex;
				flex-direction: column;
				margin-top: 16rpx;

				.type {
					margin-left: 24rpx;
				}

				.time {
					margin-top: 16rpx;
				}
			}

			.three {
				display: flex;
				align-items: center;
				margin: 16rpx 0;

				.iconfont {
					margin-right: 10rpx;
					color: rgba(76, 212, 230, 1);
				}
			}

			.four {
				margin-bottom: 16rpx;
				color: rgba(152, 160, 166, 1);
			}

			.btn {
				position: absolute;
				right: 16rpx;
				top: 76rpx;
				width: 112rpx;
				height: 48rpx;
				opacity: 1;
				border-radius: 24rpx;
				background: rgba(76, 212, 230, 1);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
</style>